<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <link rel="stylesheet" type="text/css" href="../resources/home/css/login.css">
<script src="../resources/home/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".name input").focus(function(){
                $(this).prev("i").css({"background-image":"url(../resources/home/img/user2.png)"});
            });
            $(".name input").blur(function(){
                $(this).prev("i").css({"background-image":"url(../resources/home/images/user1.png)"});
            });
            $(".password input").focus(function(){
                $(this).prev("i").css({"background-image":"url(../resources/home/img/password2.png)"});
            });
            $(".password input").blur(function(){
                $(this).prev("i").css({"background-image":"url(../resources/home/images/password1.png)"});
            });
        });
    </script>
    <style type="text/css">
    #login{
    background-color: #00a0e9;
    border: none;
    width: 100%;
    height: 40px;
    letter-spacing: 3px;
    font-size: 20px;
    margin-top: 35px;
    border-radius: 10px;
    color: #fff;
    outline: none;
   cursor: pointer;
    }
    
    
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap">
            <header><em>博客</em><span>个人博客技术有限公司</span></header>
            <article>
                <section>
                    <aside>
                        <em>
                            <img src="../resources/home/images/user.png">
                        </em>
                         <form >
                            <p class="name"><i></i><input type="text" id="username" name="username" class="userName" placeholder="请输入用户名"></p>
                            <p class="password"><i></i><input type="password"  id="password" name="password" class="pwd" placeholder="请输入密码"></p>
                                 <div class="login-center clearfix">
				<div class="login-center-input">
					<input style="width:30%;" type="text" name="cpacha" id="cpacha" value="" placeholder="请输入验证码" onfocus="this.placeholder=&#39;&#39;" onblur="this.placeholder=&#39;请输入验证码&#39;">
					<img id="cpacha-img" title="点击切换验证码" style="cursor:pointer;" src="../system/get_cpacha?vl=4&w=150&h=40&type=homeLoginCpacha" width="110px" height="30px" onclick="changeCpacha()">
				</div>
			</div>
                            <div id="login"  class="login-button"><span style="margin-left:120px;">登录</span></span></div>
                            <p class="regist"><span>没有账号?</span><a href="../index/register">立即注册</a></p>
                            <div class="clear"></div>
                        </form>
                    </aside>
                   
                </section>               
            </article>
            <footer>
                <ul>
                     <li><a href="https://www.yuanlrc.com/">联系我们</a></li>
                <li><a href="https://www.yuanlrc.com/">关于我们</a></li>
                <li><a href="https://www.yuanlrc.com/">人才招聘</a></li>
                <li><a href="https://www.yuanlrc.com/">友情链接</a></li>
                <li><a href="https://www.yuanlrc.com/">公司地址</a></li>
                <li><a href="https://www.yuanlrc.com/">关注我们</a></li>
                </ul>
                <p>本网站版权归╳╳╳技术有限公司所有，未经许可，不得转载。</p>
            </footer>
        </div>
    </div>
    <script type="text/javascript">
    function changeCpacha(){
		$("#cpacha-img").attr("src",'../system/get_cpacha?vl=4&w=150&h=40&type=homeLoginCpacha&t=' + new Date().getTime());
	}
    /* 登录*/
    document.querySelector(".login-button").onclick = function(){
    	var  username=$("#username").val();
    	var password= $("#password").val();
    	var cpacha=$("#cpacha").val();
    	if(username == '' || username == 'undefined'){
			alert("请填写用户名！");
			return false;
		}
    	if(password == '' || password == 'undefined'){
			alert("请填写密码！");
			return;
		}
    	if(cpacha == '' || cpacha == 'undefined'){
			alert("请填写验证码！");
			return;
		}

    	$.ajax({
			url:'../index/login',
			data:{username:username,password:password,cpacha:cpacha},
			type:'post',
			dataType:'json',
			success:function(data){
				if(data.type == 'success'){
					alert(data.msg)
					window.parent.location = '../index/index';
				}else{
					alert(data.msg);
					changeCpacha();
				}
			}
		}); 
    }
    
    </script>
</body>
</html>
